<style>
  @media print {
    ._wz_SafetyMeetingsSee {
      height: inherit !important;
      -webkit-print-color-adjust: exact;
    }
    ._wz_SafetyMeetingsSee .ivu-table {
      height: inherit;
    }
  }
</style>
<template>
  <div class="_wz_SafetyMeetingsSee" ref="SafetyMeetingsSee">
    <div class="no-print" style="text-align: center;font-size: 24px!important;line-height: 50px!important;letter-spacing: 1px!important;font-weight: 900;position: relative;">
      {{formDetailsData.deptName}}
      <Button type="primary" @click="printTest" style="position: absolute;right: 10px;top: 9px;">打印</Button>
    </div>
    <Card dis-hover style="margin-bottom: 10px;" class="_wz_TravelLogDetail1">

      <table cellpadding="0" cellspacing="0" border="0">
        <colgroup>
          <col width="12%">
          <col width="18%">
          <col width="12%">
          <col width="4%">
          <col width="14%">
        </colgroup>
        <tbody>
        <tr>
          <td style="text-align: center;">会议标题</td>
          <td colspan="4">{{!!formDetailsData.meetingTheme?formDetailsData.meetingTheme:'--'}}</td>
        </tr>
        <tr>
          <td style="text-align: center;">运输企业</td>
          <td colspan="4">{{!!formDetailsData.deptName?formDetailsData.deptName:'--'}}</td>
        </tr>
        <tr>
          <td style="text-align: center;">主持人</td>
          <td>{{!!formDetailsData.meetingEmcee?formDetailsData.meetingEmcee:'--'}}</td>
          <td style="text-align: center;">记录人</td>
          <td colspan="2">{{!!formDetailsData.meetingRecorder?formDetailsData.meetingRecorder:'--'}}</td>
        </tr>
        <tr>
          <td style="text-align: center;">会议时间</td>
          <td>{{!!formDetailsData.meetingStartDate?formDetailsData.meetingStartDate:'--'}}</td>
          <td style="text-align: center;">截至日期</td>
          <td colspan="2">{{!!formDetailsData.meetingEndDate?formDetailsData.meetingEndDate:'--'}}</td>
        </tr>
        <tr>
          <td style="text-align: center;">会议类型</td>
          <td>{{formDetailsData.meetingType == 1 ? '安全生产例会' : '领导小组会议'}}</td>
          <td style="text-align: center;">会议地点</td>
          <td colspan="2">{{!!formDetailsData.meetingSite?formDetailsData.meetingSite:'--'}}</td>
        </tr>
        <tr>
          <td style="text-align: center;">会议附件</td>
          <td>
            <template v-if="!!formDetailsData.meetingMaterialFirst" style="margin: 0 0 5px 0;">
              <span  @click="checkMaterial(formDetailsData.meetingMaterialFirst)" style="color: #2d8cf0;cursor: pointer;">{{formDetailsData.meetingMaterialFirstName}}</span>
            </template>
            <template v-else>--</template>
          </td>
          <td>
            <template v-if="!!formDetailsData.meetingMaterialSecond" style="margin: 0 0 5px 0;">
              <span  @click="checkMaterial(formDetailsData.meetingMaterialSecond)" style="color: #2d8cf0;cursor: pointer;">{{formDetailsData.meetingMaterialSecondName}}</span>
            </template>
            <template v-else>--</template>
          </td>
          <td colspan="2">
            <template v-if="!!formDetailsData.meetingMaterialThirdly" style="margin: 0 0 5px 0;">
              <span  @click="checkMaterial(formDetailsData.meetingMaterialThirdly)" style="color: #2d8cf0;cursor: pointer;">{{formDetailsData.meetingMaterialThirdlyName}}</span>
            </template>
            <template v-else>--</template>
          </td>
        </tr>
        <tr>
          <td style="text-align: center;">会议内容</td>
          <td colspan="4">
            <span v-html="formDetailsData.meetingContent">{{!!formDetailsData.meetingContent?formDetailsData.meetingContent:'--'}}</span>
          </td>
        </tr>
        <tr>
          <td style="text-align: center;">备注</td>
          <td colspan="4">{{!!formDetailsData.remark?formDetailsData.remark:'--'}}</td>
        </tr>
        <tr>
          <td style="text-align: center;">远程参会人员</td>
          <td colspan="4">应参人数<span style="color: #2d8cf0;">{{formDetailsData.meetingTotalNumber}}</span>/人 , 实参人数<span style="color: #19be6b;">{{formDetailsData.meetingRemoteNumber}}</span>/人</td>
        </tr>
        <template v-for="item in tableData">

          <tr>
            <td style="text-align: center;">
              <viewer>
                <img style="width: 57px;height: 79px;margin:0 5px;display: block;" :src="!!item.remoteDriverAvatar ? apiUrl.imgUrl + item.remoteDriverAvatar:'../../static/img/zwtpxd.png'" @error="public.imgDispose">
                <div style="font-size: 12px;text-align: center;overflow: hidden;text-overflow:ellipsis;white-space: nowrap;width: 100%;"></div>
              </viewer>
            </td>
            <td colspan="3">
              <div style="line-height: 30px;">
                <span style="margin: 0 10px;">{{item.remoteDriverName}} </span>
                <span style="margin: 0 10px;">{{!!item.remoteDriverPhone?item.remoteDriverPhone:'--'}}</span>
                <span style="margin: 0 10px;">{{!!item.remoteDatetime?item.remoteDatetime:'--'}}</span>
              </div>
              <div style="padding:5px 10px;">{{item.remoteAddress}}</div>
            </td>
            <td style="text-align: center;">
              <div style="float: left;line-height: 30px;">
                <img style="width: 45px;height: 62px;margin:0 5px;display: block;" :src="!!item.remoteImg ? apiUrl.imgUrl + item.remoteImg:'../../static/img/zwtpxd.png'" @error="public.imgDispose">
                <div style="font-size: 12px;text-align: center;">阅读记录</div>
              </div>
              <div style="float: left;line-height: 30px;">
                <img style="width: 45px;height: 62px;margin:0 5px;display: block;" :src="!!item.remoteSign ? apiUrl.imgUrl + item.remoteSign:'../../static/img/zwtpxd.png'" @error="public.imgDispose">
                <div style="font-size: 12px;text-align: center;">手签照</div>
              </div>
            </td>
          </tr>
        </template>
        </tbody>
      </table>

<!--      <Form label-position="right" :label-width="110">-->


<!--          <div>-->

<!--            <div style="float: left;line-height: 30px;">-->

<!--            </div>-->
<!--            <div style="float: left;width: calc(100% - 55px - 55px - 67px);line-height: initial;">-->

<!--            </div>-->
<!--            <div style="float: left;line-height: 30px;">-->
<!--              <img style="width: 45px;height: 62px;margin:0 5px;display: block;" :src="!!item.remoteImg ? apiUrl.imgUrl + item.remoteImg:'../../static/img/zwtpxd.png'" @error="public.imgDispose">-->
<!--              <div style="font-size: 12px;text-align: center;">阅读记录</div>-->
<!--            </div>-->
<!--            <div style="float: left;line-height: 30px;">-->
<!--              <img style="width: 45px;height: 62px;margin:0 5px;display: block;" :src="!!item.remoteSign ? apiUrl.imgUrl + item.remoteSign:'../../static/img/zwtpxd.png'" @error="public.imgDispose">-->
<!--              <div style="font-size: 12px;text-align: center;">手签照</div>-->
<!--            </div>-->
<!--            <div style="clear: both;"></div>-->
<!--          </div>-->
<!--          <Divider style="margin:10px 0 10px 0;" />-->
<!--        </viewer>-->
<!--      </Form>-->
      <div style="clear: both;"></div>

    </Card>


    <Drawer title="课件查看" v-model="modal" width="700" :draggable="true">
      <materialVideo v-if="modal && materialType==1" :materialData="materialData"></materialVideo>
      <materialIframe v-else-if="modal && materialType==5" :materialData="materialData"></materialIframe>
    </Drawer>

  </div>
</template>
<script>

  import materialIframe from '../../../view/educate/public/materialIframe.vue'
  import materialVideo from '../../../view/educate/public/materialVideo.vue'

  export default {
    props: ['formDetailsData'],//接收来自父组件的数据
    components: {
      materialIframe,//文档
      materialVideo,//视频
    },
    data() {
      return {
        modal: false,
        materialType: 0,//6 试题   5 html   1 视频
        materialData: {},//查看课件全部数据
        tableData: [],//表格数据
      }
    },
    beforeCreate() {//beforeCreate创建前状态

    },
    created() {//created创建完毕状态
    },
    beforeMount() {//beforeMount挂载前状态   DOM 元素然后塞入页面的过程

    },
    mounted() {//mounted 挂载结束状态
      var that = this;
      // that.axios.post(that.apiUrl.webApi + '/safety/meeting/meetingRecordInfo' , {uuid:that.formDetailsData.uuid}).then(res => {
      //   if (!!res) {
      //     that.tableData = !!res.data.data.remoteList?res.data.data.remoteList:[];
      //   }
      // }).catch(err => {
      //   console.log("失败", err)
      // })
      that.axios.post(that.apiUrl.webApi + '/safety/meeting/meetingRecordRemoteList' , {recordUuid:that.formDetailsData.uuid,remoteState:1}).then(res => {
        if (!!res) {
          that.tableData = !!res.data.data?res.data.data:[];
        }
      }).catch(err => {
        console.log("失败", err)
      })
    },
    methods: {//执行的方法
      //查看素材
      checkMaterial(src) {
        let that = this;
        // window.open(that.apiUrl.imgUrl + '/' + src)
        let type = src.substr((src.lastIndexOf(".") + 1));
        if (type == "m3u8" || type == "M3U8") {//视频
          that.materialData.videoSdUrl = src;//标清：SD
          that.materialType = 1;//5 html   1 视频
          // if (type == "MP4" || type == "mp4") {//视频
          // that.materialData.mp4Url = src;//视频路径
          // that.materialType = 1;//5 html   1 视频
        } else {//文档
          that.materialData.htmlUrl = src;//文件路径
          that.materialType = 5;//5 html   1 视频
          // that.materialData.htmlUrl = src;//标清：SD
          // that.materialType = 5;//5 html   1 视频
        }
        that.modal = true;
      },
      printTest() {
        this.$print(this.$refs.SafetyMeetingsSee) // 使用
      }
    },
    watch: {//监听

    },
    beforeUpdate() {//beforeUpdate 更新前状态

    },
    updated() {//updated 更新完成状态

    },
    beforeDestroy() {//beforeDestroy 销毁前状态

    },
    destroyed() {//destroyed 销毁完成状态

    }
  }
</script>
<style lang="less">
  ._wz_SafetyMeetingsSee {

    table {
      border-top: 1px solid #515a6e;
      border-left: 1px solid #515a6e;
      width: 100%;
      table-layout:fixed;

      td {
        min-width: 0;
        height: 40px;
        box-sizing: border-box;
        text-align: left;
        text-overflow: ellipsis;
        border-right: 1px solid #515a6e;
        border-bottom: 1px solid #515a6e;
        padding-left: 18px;
        padding-right: 18px;
        overflow:hidden;
        word-wrap: break-word;
        word-break: break-all;
        overflow: hidden;
      }
    }
    .ivu-form-item-label {
      color: #9e9e9e;
    }
  }
</style>
